<template>
  <MdEditor ref="editorRef" v-model="text" @onUploadImg="onUploadImg" />
</template>

<script setup>
import { MdEditor } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import { defineProps, ref, getCurrentInstance } from "vue";
// import { uploadContentImage } from "@/api/blog.js";
import axios from "axios";

const { proxy } = getCurrentInstance();
// 定义接收的 props
const props = defineProps({
  height: {
    type: String,
    default: "calc(100vh - 140px)",
  },
});
let text = defineModel("content");
const editorRef = ref(null);

// 图片上传
const onUploadImg = async (files, callback) => {
  const res = await Promise.all(
    files.map((file) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append("wangeditor-uploaded-image", file);

        axios
          .post("/api/blog/uploadBlogContentImg/", form, {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          })
          .then((res) => rev(res))
          .catch((error) => rej(error));
      });
    })
  );

  callback(res.map((item) => proxy.baseUrl + item.data.url));
};
</script>
